<template>
	<div style="height: 100%; background: #fff;padding-top: 50px;">
		<!--<el-button
      type="warning"
      style="position: fixed; top: 5px; right: 20px; z-index: 99"
      round
      
      >保存</el-button
    >-->
		<div class="tableCon">
			<el-tabs v-model="activeIndex" @tab-click="handleClick">
				<el-tab-pane :name="item" v-for="(item, index) in NumList">
					<div slot="label">
						<input :value="NumList[index]" class="inputClass" @change="changeNum($event,index)" :disabled="FStatus=='A'?true:false" size="small" style="width:80px" placeholder="请输入"></input>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div style="height: calc(100vh - 50px); position: relative">
			<div class="lefBox">
				<el-form ref="form" :model="searchData" label-width="80px" size="mini" label-position="right" style="position: relative;" :inline="true">
					<el-form-item label="刊期">
						<el-date-picker @change="changeP1" :clearable="false" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 130px" placeholder="选择日期" v-model="searchData.P1">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="广告类型">
						<el-select placeholder="请选择活动区域" style="width: 130px" v-model="searchData.P2">
							<el-option :label="item.FType" v-for="(item, index) in typeList" :value="item.FType"></el-option>
						</el-select>
					</el-form-item>
					<template v-if="slideDown">
						<el-form-item label="合同号">
							<el-input placeholder="请输入合同号" style="width: 130px" v-model="searchData.FSONO"></el-input>
						</el-form-item>
						<el-form-item label="业务员">
							<el-input placeholder="请输入业务员" style="width: 130px" v-model="searchData.FSales"></el-input>
						</el-form-item>
						<el-form-item label="规格">
							<el-input placeholder="请输入规格" style="width: 130px" v-model="searchData.FPDName"></el-input>
						</el-form-item>
						<el-form-item label="颜色">
							<el-input placeholder="请输入颜色" style="width: 130px" v-model="searchData.FColor"></el-input>
						</el-form-item>
					</template>
					<span class="el-icon-s-fold" @click="slideDown = !slideDown" style="position: absolute;right: -2px;top:8px;cursor: pointer;"></span>
					<div style="text-align: center">
						<el-button type="primary" size="small" @click="onSearch">查询</el-button>
						<el-button type="danger" size="small" @click="dialogVisible = true" v-if="FStatus!='A'">画图</el-button>
						<el-button type="warning" size="small" @click="savePost">保存</el-button>
						<el-button type="success" size="small" @click="printShow('')">预览</el-button>

					</div>
				</el-form>
				<div>
					<el-row>
						<el-divider content-position="center">
							<p>搜索结果</p>
						</el-divider>
						<el-table :data="list1" row-key="id" style="width: 100%" border  max-height="550" >
							<el-table-column :width="item.width ? item.width : 140" v-for="(item, index) in col" :key="`col_${index}`" :prop="col[index].label" :label="item.label">
								<template slot-scope="scope">
									<span v-if="item.prop == 'FPostDate'">
                    {{ $ComFunJS.getNowDate("", scope.row[item.prop]) }}
                  </span>
									<span v-else>{{ scope.row[item.prop] || "-" }}</span>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
				</div>
			</div>
			<div class="rightBox" ref="BoxRight" @click.stop="itemIndex=null">
				<div class="BoxContent" ref="BoxContent" :style="{
            width: `${typeDetail.FW * 2}px`,
            height: `${typeDetail.FH * 2}px`,
          }">
					<draggable :sort="false"  v-if="DeL"   class="dragArea list-group flexBox" :list="listform[activeIndex]" @start="listOneStart($event)" @end="listOneEnd($event, 'two')">
						<el-card shadow="always" class="BoxItem" :class="itemIndex==index?'change':''" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
                element.FColor || '-'
              },${element.FCustName || '-'},${element.FContact || '-'},${
                element.FSales || '-'
              }`" :style="{
                left: `${element.left}px`,
                top: `${element.top}px`,
                width: `${element.TFW}px`,
                height: `${element.TFH}px`,
              }" v-for="(element, index) in listform[activeIndex]">
							<p class="el-icon-error Picon" @click="Delete(element, index)" v-if="FStatus!='A'"></p>
							<div @click.stop="getTableIndex(element,index)" style="display: flex;align-items: center;justify-content: center;" :style="{
                left: `${element.left}px`,
                top: `${element.top}px`,
                width: `${element.TFW}px`,
                height: `${element.TFH}px`,
              	}">
								<p class="Ta" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
	                  element.FColor || '-'
	                },${element.FCustName || '-'},${element.FContact || '-'},${
	                  element.FSales || '-'
	                }`">
									{{`${element.FCustName || "-"}`}}</br>
									{{`${element.FSONO || "-"}`}}</br>
																				{{`${element.FContriName || "-"}`}}</br>
											{{`${element.FadvNote || "-"}`}}</br>
									{{`${element.FPDName || "-"} ${element.FColor || "-"}`}}</br>
									{{`${element.FContact || "-"} ${element.FSales || "-"}`}}
								</p>
							</div>
						</el-card>
					</draggable>
				</div>
			</div>
		</div>
		<el-dialog title="画图" :visible.sync="dialogVisible" width="25%">
			<div>
				<el-form ref="forms" label-width="80px">
					<el-form-item label="高度">
						<el-input v-model="detailModal.FH">
							<template slot="append">厘米(cm)</template>
						</el-input>
					</el-form-item>
					<el-form-item label="宽度">
						<el-input v-model="detailModal.FW">
							<template slot="append">厘米(cm)</template>
						</el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="AddBox">确 定</el-button>
		  </span>
		</el-dialog>
		<!--<el-dialog title="打印设置" :visible.sync="HPrintVisable" width="25%">
			<div>
				<el-form ref="forms" label-width="150px">
					<el-form-item label="合成打印板数">
						  <el-input-number v-model="hcbs"  :min="1"></el-input-number>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="HPrintVisable = false">取 消</el-button>
		    <el-button type="primary" @click="printShow('1')">确 定</el-button>
		  </span>
		</el-dialog>		-->
		<el-card class="box-card" style="width:18%;position: fixed;right: 0;bottom: 0;" v-if="itemIndex!=null">
			<el-form ref="forms" label-width="80px" size="mini">
				<el-form-item label="客户名称">
					<span>{{itemInof.FCustName}}</span>
				</el-form-item>
				<el-form-item label="合同号">
					<span>{{itemInof.FSONO }}</span>
				</el-form-item>
				<el-form-item label="颜色">
					<span>{{itemInof.FColor}}</span>
				</el-form-item>
				<el-form-item label="规格">
					<span>{{itemInof.FPDName}}</span>
				</el-form-item>
				<el-form-item label="宽">
					<span>{{itemInof.FW}}</span>
				</el-form-item>
				<el-form-item label="高">
					<span>{{itemInof.FH}}</span>
				</el-form-item>
				<el-form-item label="稿名">
					<span>{{itemInof.FContriName}}</span>
				</el-form-item>
				<el-form-item label="业务员">
					<span>{{itemInof.FSales}}</span>
				</el-form-item>
				<el-form-item label="折扣">
					<span>{{itemInof.FDiscount}}</span>
				</el-form-item>
				<el-form-item label="金额">
					<span>{{itemInof.FAmount}}</span>
				</el-form-item>
				<el-form-item label="广告备注">
					<span>{{itemInof.FadvNote}}</span>
				</el-form-item>
				<el-form-item label="X">
					<el-input v-model="listform[activeIndex][itemIndex].left" type="number">
						<template slot="append">像素(px)</template>
					</el-input>
				</el-form-item>
				<el-form-item label="Y">
					<el-input v-model="listform[activeIndex][itemIndex].top" type="number">
						<template slot="append">像素(px)</template>
					</el-input>
				</el-form-item>
			</el-form>
		</el-card>
		<el-dialog width="100%" title="打印选择" :visible.sync="PrintVisable" :fullscreen="true" :append-to-body="true">
			<div class="dialog-footer" style="text-align: right;margin-bottom: 20px;">
<!--				<el-button type="warning" @click="hcShow" v-if="searchData.P2=='中缝广告'">合成打印预览</el-button>
-->				<el-button type="primary" @click="postPrint">打印</el-button>
				<el-button @click="PrintVisable=false" style="margin-left: 10px;">退出</el-button>
			</div>
			<div  style="word-wrap: normal;text-align: center;; transform-origin:0 0;padding:5px;width: 100%;height: 100%;box-sizing: border-box;transform:scale(0.67);" :style="{
		          }" v-for="i in NumberNum" :id="`BoxContent${i}`">
				<p style="font-size: 22px;padding-bottom:10px;">{{Fstitle}}</p>
				<div style="border: 2px solid #000;" :style="{
		            width: `${typeDetail.FW * 2 * scale +160}px`,
		            height: `${typeDetail.FH * 2+100}px`
		          }">

					<div :style="{
		            width: `${typeDetail.FW * 2}px`,
		            height: `${typeDetail.FH * 2}px`,
		          }" style="margin: 0 auto;margin-bottom: 15px;position: relative;display: inline-block;margin-right: 20px;" @click="selectItem(box)" v-if="(bindex+1)>Number((i-1)*`${searchData.P2=='中缝广告'?hcbs:3}`) && (bindex+1)<=Number(i*`${searchData.P2=='中缝广告'?hcbs:3}`) " v-for="(box,bindex) in printList">
						<p class="el-icon-error" @click="delPrint(bindex)" style="position: absolute;right: -5px;top:-5px;font-size: 23px;color:red;z-index: 999;"></p>
						<p class="sectit">{{box}}</p>
						<div class="BoxContent" :class="hcList.findIndex(e=>e==box)!=-1?'change':''" :style="{
		            width: `${typeDetail.FW * 2}px`,
		            height: `${typeDetail.FH * 2}px`,
		          }">

							<el-card shadow="always" class="BoxItem" :class="itemIndex==index?'change':''" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
                element.FColor || '-'
              },${element.FCustName || '-'},${element.FContact || '-'},${
                element.FSales || '-'
              }`" :style="{
                left: `${element.left}px`,
                top: `${element.top}px`,
                width: `${element.TFW}px`,
                height: `${element.TFH}px`,
              }" v-for="(element, index) in listform[box]">
								<div style="display: flex;align-items: center;justify-content: center;" :style="{
                left: `${element.left}px`,
                top: `${element.top}px`,
                width: `${element.TFW}px`,
                height: `${element.TFH}px`,
              	}">
									<p class="Ta" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
	                  element.FColor || '-'
	                },${element.FCustName || '-'},${element.FContact || '-'},${
	                  element.FSales || '-'
	                }`">
										{{`${element.FCustName || "-"}`}}</br>
										{{`${element.FSONO || "-"}`}}</br>
										{{`${element.FContriName || "-"}`}}</br>
										{{`${element.FadvNote || "-"}`}}</br>
										{{`${element.FPDName || "-"} ${element.FColor || "-"}`}}</br>
										{{`${element.FContact || "-"} ${element.FSales || "-"}`}}
									</p>
								</div>
							</el-card>
						</div>
					</div>
				</div>
			</div>
			<el-dialog width="100%" title="合成打印" :visible.sync="TPrintVisable" :fullscreen="true" :append-to-body="true">
				<div class="dialog-footer" style="text-align: right;margin-bottom: 20px;">
					<el-button type="primary" @click="HcpostPrint">打印</el-button>
				</div>
				<div  style="word-wrap: normal;text-align: center;; transform-origin:0 0;padding:5px;width: 100%;height: 100%;box-sizing: border-box;transform:scale(0.67);" id="zhongfeng">
					<p style="font-size: 22px;padding-bottom:10px;">{{Fstitle}}</p>
					<div style="border: 2px solid #000;" :style="{
			            width: `${typeDetail.FW * 2 * hcList.length +160}px`,
			            height: `${typeDetail.FH * 2+100}px`
			          }">
	
						<div :style="{
			            width: `${typeDetail.FW * 2}px`,
			            height: `${typeDetail.FH * 2}px`,
			          }" style="margin: 0 auto;margin-bottom: 15px;position: relative;display: inline-block;margin-right: 20px;"  v-for="(box,bindex) in hcList">
							<p class="sectit">{{box}}</p>
							<div class="BoxContent"  :style="{
			            width: `${typeDetail.FW * 2}px`,
			            height: `${typeDetail.FH * 2}px`,
			          }">
	
								<el-card shadow="always" class="BoxItem" :class="itemIndex==index?'change':''" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
	                element.FColor || '-'
	              },${element.FCustName || '-'},${element.FContact || '-'},${
	                element.FSales || '-'
	              }`" :style="{
	                left: `${element.left}px`,
	                top: `${element.top}px`,
	                width: `${element.TFW}px`,
	                height: `${element.TFH}px`,
	              }" v-for="(element, index) in listform[box]">
									<div style="display: flex;align-items: center;justify-content: center;" :style="{
	                left: `${element.left}px`,
	                top: `${element.top}px`,
	                width: `${element.TFW}px`,
	                height: `${element.TFH}px`,
	              	}">
										<p class="Ta" :title="`${element.FSONO || '-'},${element.FPDName || '-'},${
		                  element.FColor || '-'
		                },${element.FCustName || '-'},${element.FContact || '-'},${
		                  element.FSales || '-'
		                }`">
											{{`${element.FCustName || "-"}`}}</br>
											{{`${element.FSONO || "-"}`}}</br>
											{{`${element.FContriName || "-"}`}}</br>
											{{`${element.FadvNote || "-"}`}}</br>
											{{`${element.FPDName || "-"} ${element.FColor || "-"}`}}</br>
											{{`${element.FContact || "-"} ${element.FSales || "-"}`}}
										</p>
									</div>
								</el-card>
							</div>
						</div>
					</div>
				</div>
			</el-dialog>			
		</el-dialog>
	</div>
</template>
<script>
	import Sortable from "sortablejs";
	import html2Canvas from 'html2canvas';
	import JsPDF from 'jspdf'
	import draggable from "vuedraggable";
	export default {
		name: "clone",
		display: "Clone",
		order: 2,
		components: {
			draggable,
		},
		data() {

			return {
				dialogVisible: false,
				slideDown: false,
				HPrintVisable:false,
				PrintVisable: false,
				TPrintVisable:false,
				detailModal: {
					FW: '',
					FH: '',
				},
				col: [{
						label: "合同号",
						prop: "FSONO",
						width: "80",
					},
					{
						label: "客户",
						prop: "FCustName",
						width: "110",
					},
					{
						label: "稿名",
						prop: "FContriName",
						width: "110",
					},
					{
						label: "规格",
						prop: "FPDName",
						width: "80",
					},
					{
						label: "版面",
						prop: "FLayout",
						width: "80",
					},					
					{
						label: "颜色",
						prop: "FColor",
						width: "50",
					},

					{
						label: "H",
						prop: "FH",
						width: "80",
					},
					{
						label: "W",
						prop: "FW",
						width: "80",
					},
					{
						label: "代理机构名称",
						prop: "FAgentName",
						width: "150",
					},
					{
						label: "电话",
						prop: "FFel",
					},
					{
						label: "代理电话",
						prop: "FAgentFel",
					},
					{
						label: "业务员",
						prop: "FSales",
					},
					{
						label: "联系人",
						prop: "FContact",
					},
					{
						label: "刊期",
						prop: "FPostDate",
						width: "100",
					},
					{
						label: "付款方式",
						prop: "FPaymenttype",
					},
				],
				searchData: {
					P1: "",
					P2: "",
					FSONO: "",
					FCUstNO: "", //客户信息
					FSales: "", //业务员
					FPDName: "", //规格
					FColor: "", //颜色
				},
				activeIndex: "",
				list1: [],
				listnum: 0,
				listform: {},
				list2: [],
				NumList: [],
				printList: [],
				NumberNum: 0,
				activeNames: [],
				typeList: [],
				count: 0,
				typeDetail: {
					FW: 0,
					FH: 0,
				},
				ID: "",
				sales: "",
				md5: "",
				itemIndex: null,
				startDetail: {

				},
				FStatus: "",
				Fstitle: "",
				itemInof: {},
				DeL:true,
				hcList:[],
				hcbs:6
			};
		},
		computed: {
			scale: function() {
				let _this = this
				let scale = 3;
				if(_this.searchData.P2=='中缝广告') {
					scale = this.hcbs
				}
				return scale
			}
		},
		mounted() {
			this.getType();
			this.rowDrop();
			this.searchData.P1 = this.$ComFunJS.getNowDate();
			this.$route.query.id ? this.ID = this.$route.query.id : "";
			this.$route.query.sales ? this.sales = this.$route.query.sales : "";
			this.$route.query.md5 ? this.md5 = this.$route.query.md5 : "";
		},
		watch: {
			//			"NumList": function() {
			//
			//			}
		},
		methods: {
			selectItem(item){
				if(this.searchData.P2=='中缝广告'){
					let index = this.hcList.findIndex(e=>e==item);
					if(index==-1){
						this.hcList.push(item)
					}else{
						this.hcList.splice(index,1)
					}
					
				}else{
					return
				}
				
			},
			hcShow(){
				if(!this.hcList.length){
					this.$message({
						message: "请选择合成对象~",
						type: "warning",
						duration: 500
					});
					return					
				}
				this.TPrintVisable = true
			},
			changeNum(data, index) {
				let findIndex = this.NumList.findIndex(
					(res) => res == data.target.value
				);
				if(findIndex != -1) {
					data.target.value = this.NumList[index]
					this.$message({
						message: "名称重复~",
						type: "warning",
						duration: 500
					});
					return
				}
				this.NumList[index] = data.target.value
				let _this = this
				let label = { ..._this.listform
				};
				let Tlabel = {}
				if(_this.NumList.length) {
					_this.NumList.forEach((key, index) => {
						if(key != 'Numlist') {
							if(key != Object.keys(label)[index]) {
								_this.activeIndex = key
							}
							Tlabel[key] = label[Object.keys(label)[index]];
						}
					});
					_this.listform = Tlabel
				}
				console.log(Tlabel)
			},
			changeP1(value) {
				this.getType(value)
			},
			delPrint(index) {
				this.printList.splice(index, 1)
			},
			printShow(type) {
				this.printList = [...this.NumList];
				this.hcList = [];
				this.NumberNum = Number(Math.ceil(this.printList.length / this.scale));
				this.PrintVisable = true
			},
			//打印
			postPrint() {
				var newWin = window.open(""); //新打开一个空窗口
				for(var i = 1; i <= this.NumberNum; i++) {
					var imageToPrint = document.getElementById("BoxContent" + i); //获取需要打印的内容
					imageToPrint.style.pageBreakBefore = "always";
					newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
				}
				const styleSheet = `<style>
				@page{
					margin:0
				}
				body,html{
					margin:0
				}	.BoxContent {
					height: 100%;
					border: 2px solid #000;
					position: relative;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
				}	.BoxItem {
					position: absolute;
					box-sizing: border-box;
					border: 1px solid #333;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;}		.Ta {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						font-size:18px;
						margin-bottom: 5px;
						cursor: pointer;
						text-align: center;
					}	.sectit{text-align:center;font-size: 23px;color:#333;z-index: 999;width: 100%;
				}</style>`;
				newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
				newWin.document.close(); //在IE浏览器中使用必须添加这一句
				newWin.focus(); //在IE浏览器中使用必须添加这一句
				setTimeout(function() {
					newWin.print(); //打印
					newWin.close(); //关闭窗口
				}, 1000);
			},
			//打印
			HcpostPrint() {
				var newWin = window.open(""); //新打开一个空窗口
				var imageToPrint = document.getElementById("zhongfeng"); //获取需要打印的内容
				imageToPrint.style.pageBreakBefore = "always";
				newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
				const styleSheet = `<style>
				@page{
					margin:0
				}
				body,html{
					margin:0
				}	.BoxContent {
					height: 100%;
					border: 2px solid #000;
					position: relative;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
				}	.BoxItem {
					position: absolute;
					box-sizing: border-box;
					border: 1px solid #333;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: center;}		.Ta {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
						font-size:18px;
						margin-bottom: 5px;
						cursor: pointer;
						text-align: center;
					}	.sectit{text-align:center;font-size: 23px;color:#333;z-index: 999;width: 100%;
				}</style>`;
				newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
				newWin.document.close(); //在IE浏览器中使用必须添加这一句
				newWin.focus(); //在IE浏览器中使用必须添加这一句
				setTimeout(function() {
					newWin.print(); //打印
					newWin.close(); //关闭窗口
				}, 1000);
			},			
			//获取索引值
			getTableIndex(item, index) {
				console.log(item)
				if(this.FStatus == 'A') {
					return
				}
				this.$ComFunJS.post(
					"API.ashx", {
						P1: item.FSONO,
						P2: item.FLineID,
						action: "BASE_ORDERLYOUT",
					},
					(res) => {
						this.itemInof = res.result[0]
						this.itemIndex = index
					}
				);

			},
			//删除
			Delete(item, index) {
				this.DeL = false;
				
				this.listform[this.activeIndex].splice(index, 1);
				setTimeout(()=>{
					this.DeL = true;
				},.5)
				let label = { ...this.listform};
				if(!item.FSONO) {
					return
				}
				let FPostDate = this.searchData.P1;
				let FType = this.searchData.P2;
				this.$ComFunJS.post(
					"API.ashx", {
						action: "BASE_UPDATFLINE",
						P1: item.FSONO,
						P2: item.FLineID,
						FContent: JSON.stringify({ ...label
						}),
						FPostDate: FPostDate,
						FType: FType,
						md5: this.md5
					},
					(res) => {
						if(!res.error) {
							this.$message({
								message: "删除成功~",
								type: "success",
							});

							this.list1 = [...this.list1, { ...item
							}];
						}
					}
				);
			},
			//导出PDF
			downloadPDF(pdfName) {
				if(!pdfName) {
					pdfName = this.pdfName
				}
				//职务-姓名/单位/全校 干部综合测评与工作量考核分析报告
				let ele = this.$refs.AllBoxContent;
				let eleW = ele.offsetWidth // 获得该容器的宽
				let eleH = ele.offsetHeight // 获得该容器的高
				let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
				let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
				var canvas = document.createElement('canvas')
				var abs = 0
				let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
				let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）

				if(win_out > win_in) {
					// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
					abs = (win_out - win_in) / 1 // 获得滚动条宽度的一半
					// console.log(a, '新abs');
				}

				canvas.width = eleW * 2 // 将画布宽&&高放大两倍
				canvas.height = eleH * 2
				canvas.style.height = canvas.height + "px";
				var context = canvas.getContext('2d')
				console.log(canvas.width)
				context.scale(2, 2)
				context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
				// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
				// translate的时候，要把这个差值去掉
				// html2canvas(element).then( (canvas)=>{ //报错
				// html2canvas(element[0]).then( (canvas)=>{
				html2Canvas(ele, {
					dpi: 300,
					allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
					useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
				}).then((canvas) => {
					var contentWidth = canvas.width
					var contentHeight = canvas.height;
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 592.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight
					//页面偏移
					var position = 0
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28
					var imgHeight = 595.28 / contentWidth * contentHeight
					var pageData = canvas.toDataURL('image/jpeg', 1.0)
					var pdf = new JsPDF('', 'pt', 'a4')
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					if(leftHeight < pageHeight) {
						//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
						pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
						// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
					} else { // 分页
						while(leftHeight > 0) {
							pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
							leftHeight -= pageHeight
							position -= 841.89
							//避免添加空白页
							if(leftHeight > 0) {
								pdf.addPage()
							}
						}
					}
					//可动态生成
					pdf.save(pdfName)
				})
			},			
			//保存
			savePost() {
				let FSONOLine = [];
				let label = { ...this.listform
				};
				Object.keys(label).forEach((key, index) => {
					if(key != 'Numlist' && label[key].length) {
						FSONOLine.push(...label[key]);
					}
				});
				label.Numlist = [...this.NumList];
				if(!FSONOLine.length) {
					label = ''
				}
				this.$ComFunJS.post(
					"API.ashx", {
						action: "BASE_UPORDERDT",
						P1: this.searchData.P1,
						P2: this.searchData.P2,
						FSONOLine: JSON.stringify(FSONOLine),
						FContent: label ? JSON.stringify({ ...label
						}) : '',
						sales: this.sales,
						md5: this.md5
					},
					(res) => {
						if(!res.error) {
							this.$message({
								message: "保存成功",
								type: "success",
							});
						}
					}
				);
			},
			//搜索
			onSearch() {
				this.NumList = [];
				this.listform = {};
				if(this.searchData.P2) {
					this.changeType();
				}
				this.getTypeList();
			},
			//类型选择
			changeType(type) {
				let index = this.typeList.findIndex(
					(res) => res.FType == this.searchData.P2
				);
				this.typeDetail = this.typeList[index];
				if(this.searchData.P2=='中缝广告'){
					this.hcbs = this.typeList[index].FPage
				}
				if(this.searchData.P2 != this.typeDetail.FType) {
					Object.keys(this.listform).map((key) => {
						this.listform[key] = [];
					});
				}
				this.changeList(this.typeDetail.FNumber, type);

			},
			//改变
			changeList(num, type) {
				if(type) {
					console.log()
					if(this.NumList.length) {
						return
					} else {
						this.NumList = Object.keys(this.listform).map((keys) => {
							return keys
						})
					}
				} else {
					this.NumList = [];
					for(let i = 0; i < num; i++) {
						if(i == 0) {
							this.activeIndex = `A${i + 1}`;
						}
						this.NumList.push(`A${i + 1}`);
						this.$set(this.listform, `A${i + 1}`, []);
					}
				}
				console.log(this.NumList)
			},
			// 行拖拽
			rowDrop() {
				const tbody = document.querySelector(".el-table__body-wrapper tbody");
				const _this = this;
				Sortable.create(tbody, {
					draggable: ".el-table__row",
					sort:false,
					onEnd(e) {
						if(_this.FStatus == 'A') {
							_this.$message({
								message: "记录已审核",
								type: "warning",
							});
							return
						}
						_this.listOneEnd(e, "one");
					},
				});
			},
			handleClick(item) {
				console.log(item);
			},
			//根据毫米算DPI
			cm2px(cm) {
				//				var dpi = this.getDPI();
				//				var pixel = parseFloat(cm) / 25.4 * dpi[0]; //只计算x轴的dPI
				return parseInt(cm * 2);
			},
			getDPI() {
				var arrDPI = new Array();
				if(window.screen.deviceXDPI != undefined) {
					//ie 9
					arrDPI[0] = window.screen.deviceXDPI;
					arrDPI[1] = window.screen.deviceYDPI;
				} else {
					//chrome firefox
					var tmpNode = document.createElement("DIV");
					tmpNode.style.cssText =
						"width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
					document.body.appendChild(tmpNode);
					arrDPI[0] = parseInt(tmpNode.offsetWidth);
					arrDPI[1] = parseInt(tmpNode.offsetHeight);
					tmpNode.parentNode.removeChild(tmpNode);
				}
				return arrDPI;
			},
			//类型获取
			getType(time) {
				this.$ComFunJS.post(
					"API.ashx", {
						P1: time,
						action: "BASE_ADTYPE",
					},
					(res) => {
						this.typeList = res.result;
						!time ? this.getTypeList('one') : '';
					}
				);
			},
			AddBox() {
				let list = [...this.listform[this.activeIndex]];
				let label = { ...this.detailModal
				};
				label.TFW = this.cm2px(label.FW * 10);
				label.TFH = this.cm2px(label.FH * 10);
				list.push(label)
				this.listform[this.activeIndex] = [...list];
				this.dialogVisible = false
			},
			//获取列表
			getTypeList(type) {
				this.loading = true;
				let data = {
					action: "BASE_ORDERDETAIL",
					...this.searchData,
					...{
						md5: this.md5
					}
				};
				type ? data.ID = this.ID : ''
				this.$ComFunJS.post(
					"API.ashx", {
						...data,
					},
					(res) => {
						res.result = res.result.map((item) => {
							item.TFW = this.cm2px(item.FW * 10);
							item.TFH = this.cm2px(item.FH * 10);
							return item;
						});
						this.list1 = res.result;
						if(res.result2.length) {
							let lable = JSON.parse(res.result2[0].FContent)
							this.listform = JSON.parse(res.result2[0].FContent);
							this.NumList = lable.Numlist ? lable.Numlist : [];
							this.NumList.length ? this.activeIndex = this.NumList[0] : "";
							this.searchData.P1 = res.result2[0].FPostDate;
							this.searchData.P2 = res.result2[0].FType;
							this.FStatus = res.result2[0].FStatus
							this.NumList.length ? this.changeType('change') : this.changeType();
						} else {
							this.FStatus = ""
						}
						this.Fstitle = res.result3
						console.log('a', this.NumList)
					}
				);
			},
			//开始拖动
			listOneStart(e) {
				if(this.FStatus == 'A') {
					this.$message({
						message: "记录已审核",
						type: "warning",
					});
					return
				}
				let Box = this.$refs["BoxRight"];
				let label = { ...this.listform[this.activeIndex][e.newIndex]
				};
				let Bwidth = Box.offsetLeft;
				let Bheigth = Box.offsetTop;
				let w = label.FW * 10;
				let h = label.FH * 10;
				this.startDetail = {
					disX: e.originalEvent.clientX - e.item.offsetLeft, //记录鼠标的水平位置
					disY: e.originalEvent.clientY - e.item.offsetTop, //记录鼠标的垂直位置
					eleX: e.originalEvent.offsetX, //记录元素的水平位置
					eleY: e.originalEvent.offsetY, //记录元素的垂直位置
				}
			},
			//拖动结束
			listOneEnd(e, t) {
				if(this.FStatus == 'A') {
					this.$message({
						message: "记录已审核",
						type: "warning",
					});
					return
				}
				let list = [...this.listform[this.activeIndex]];
				let Box = this.$refs["BoxRight"];
				let Cox = this.$refs['BoxContent']
				let label =
					t == "one" ? { ...this.list1[e.oldIndex]
					} : { ...list[e.newIndex]
					};
				let w = label.FW * 10;
				let h = label.FH * 10;
				let Bwidth = Box.offsetLeft;
				let Bheigth = Box.offsetTop;
				let CX = e.originalEvent.clientX - this.startDetail.clientX;
				let CY = e.originalEvent.clientY - this.startDetail.clientY;
				if(t == 'one') {
					label.left = e.originalEvent.clientX - Bwidth - w / 2
					label.top = e.originalEvent.clientY - Bheigth - h * 2;
				} else {
					label.left = e.originalEvent.clientX - this.startDetail.disX
					label.top = e.originalEvent.clientY - this.startDetail.disY;
					this.startDetail = {}
				}
				if(label.left < 0) {
					label.left = 0;
				}
				if(label.left > Cox.clientWidth - w) {
					label.left = Cox.clientWidth - w;
				}

				if(label.top < 0) {
					label.top = 0;
				}
				if(t == "one") {
					list.push(label);
					this.list1.splice(e.oldIndex, 1);
					this.listform[this.activeIndex] = list
				} else {
					this.$set(this.listform[this.activeIndex], e.newIndex,{...label})
				}
			},

			handleChange: function() {},
			deleteItem: function(index) {
				this.listform[this.activeIndex].splice(index, 1);
			},
		},
	};
</script>
<style lang="scss">
	.row {
		display: flex;
		width: 100%;
	}
	
	.inputClass {
		height: 32px;
		line-height: 32px;
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		outline: none;
		padding: 0 15px;
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 100%;
	}
	
	.tableCon {
		position: fixed;
		right: 20px;
		top: 0;
		z-index: 99;
		width: calc(100% - 550px);
	}
	
	.col-5 {
		flex: 0 0 40%;
		max-width: 40%;
		margin-right: 10%;
	}
	
	.list-group {
		display: flex;
		flex-direction: column;
		padding-left: 0;
		margin-bottom: 0;
		border: 0;
	}
	
	.list-group-item:first-child {
		border-top-left-radius: 0.25rem;
		border-top-right-radius: 0.25rem;
	}
	
	.list-group-item {
		position: relative;
		display: block;
		padding: 0.75rem 1.25rem;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid rgba(0, 0, 0, 0.125);
		box-sizing: border-box;
	}
	
	.el-collapse-item__header {
		border: 0;
		height: 40px;
		line-height: 40px;
	}
	
	.el-collapse-item__wrap {
		border-bottom: 0;
	}
	
	.list-group-item {
		cursor: move;
	}
	
	h3 {
		font-size: 28px;
		margin-bottom: 20px;
	}
	
	.el-icon-circle-close {
		color: #c9a2a2;
		font-size: 20px;
		position: absolute;
		right: 50px;
	}
	
	.el-icon-circle-close:hover {
		color: #f40;
	}
	
	.lefBox {
		width: 500px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-right: 1px solid #ebeef5;
		min-height: 100%;
		overflow-y: auto;
		padding: 20px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.box-card {
		margin-top: 10px;
		.item {
			margin-bottom: 8px;
			font-size: 13px;
		}
	}
	
	.rightBox {
		width: calc(100% - 500px);
		height: 100%;
		padding: 10px;
		padding-right: 25px;
		margin-left: 500px;
		position: relative;
		box-sizing: border-box;
	}
	
	.BoxContent {
		height: 100%;
		border: 2px solid #ebeef5;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		&.change{
			border-color: #66b1ff;
		}
	}
	
	.Ta {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		font-size: 18px;
		margin-bottom: 5px;
		cursor: pointer;
		text-align: center;
	}
	
	.sectit {
		text-align: center;
		font-size: 23px;
		color: #333;
		z-index: 999;
		width: 100%;
		margin: 15px 0;
	}
	
	.BoxItem {
		position: absolute;
		box-sizing: border-box;
		border: 1px solid #333;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		&.change {
			border: 1px solid #66b1ff;
			.Picon {
				color: #66b1ff;
			}
		}
		.Picon {
			position: absolute;
			left: 0;
			top: 0;
			font-size: 26px;
		}
	}
	
	.flexBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}
</style>